import React, { Component, useState } from 'react'
import "./shopOrder.css"
import { Link } from "react-router-dom"
import { Tabs, Drawer, message } from 'antd';
import { LeftOutlined, } from '@ant-design/icons';
import { shopOrderList, pay } from '../../api/shopOrder';
import axios from 'axios';

export default class shopOrder extends Component {
    constructor() {
        super()
        this.state = {
            order: [
                {
                    tabName: "求购中",
                    key: "1",
                    ostate: "4"
                },
                {
                    tabName: "待付款",
                    key: "2",
                    ostate: "0"
                },
                {
                    tabName: "待发货",
                    key: "3",
                    ostate: "1"
                },
                {
                    tabName: "待收货",
                    key: "4",
                    ostate: "2"
                },
                {
                    tabName: "交易历史",
                    key: "5",
                    ostate: "3"
                }],
            orderList: [

            ]


        }
    }


    getshopOrder(key) {

        shopOrderList({
            ostate: this.state.order[key - 1].ostate + '',
            uid: localStorage.getItem("uid")
        }).then((res) => {

            this.state.orderList = res.data
            this.setState({})
        })
    }

    componentDidMount() {
        this.getshopOrder(this.props.location.state)

    }
    render() {

        const { TabPane } = Tabs;
        let selectedOid = null
        function callback(key) {

        }

        const Demo = () => {
            let showDrawer = (oid) => {
                setVisible(true)
                selectedOid = oid
            }
            let onClose = () => {
                setVisible(false)
                pay({oid:selectedOid}).then(res=>{
                    console.log(res)
                    if(res.data) message.success('支付成功')
                    else message.success('支付失败')
                })
            }
            // let afterVisible = (viseble) => {
            //     console.log(viseble, 'vv')
            //     let data = {
            //         orderId: 'orderId',
            //         price: 'price',
            //         body: 'nice'
            //     }
            //     if (viseble) {
            //         axios.post('http://ceshi.qfjava.cn/payment/weixinpay', data).then(res => {
            //             console.log(res)
            //         })
            //     }
            // }
            let [visible, setVisible] = useState(false)
            return (
                <div>
                    <Tabs
                        defaultActiveKey={this.props.location.state}
                        onChange={callback}
                        type="card"
                        centered
                        animated
                        onTabClick={(key) => { this.getshopOrder(key) }}>
                        {this.state.order.length && this.state.order.map((item, i) =>
                            <TabPane tab={item.tabName} key={item.key}>
                                <div>
                                    {
                                        this.state.orderList.length && this.state.orderList.map((itemi, i) =>
                                            <div key={i} onClick={showDrawer.bind(this,itemi.oid)}>
                                                <div className="orderPreview">
                                                    <div>
                                                        <img src={itemi.product.photo[0].path} />
                                                    </div>
                                                    <div className="orderContent">

                                                        <div className="orderShopName">
                                                            {itemi.product.pname}
                                                        </div>
                                                        <div className="orderPrice">
                                                            <div className="orderCode">42码 </div>
                                                            <div className="orderPriceP">￥  {itemi.money}</div>
                                                        </div>
                                                    </div>

                                                    <div className="orderClose">交易</div>
                                                </div>
                                            </div>
                                        )}
                                </div>
                            </TabPane>
                        )}
                    </Tabs>
                    <Drawer
                        title="扫描二维码付款"
                        placement="bottom"
                        closable={true}
                        onClose={onClose}
                        visible={visible}
                        push={{ distance: 360 }}
                    >
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b0d857b1a34d0000012e7e87f5eb.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620663563&t=54e73c6608f95250548c37493885b883"/>
                    </Drawer>
                </div>
            )
        };


        return (
            <div>
                <div className="ShopOrderHeader">
                    <Link to="/Mine" className="ShopOrderBack">
                        <LeftOutlined />
                    </Link>
                    <span>
                        我的购买
                    </span>

                </div>
                <div id="orderCard">
                    <Demo />
                </div>
            </div>
        )
    }
}
